<template>
	<view class="credit-cont">
		<view class="order-list" v-for="(item,index) in orderList" :key="index">
			<view class="order-top">
				<view class="order-create-time">
					{{item.create_time}} {{item.seller}}<text class="ml-10" v-if="item.is_baojia_zone ==1">(保价区)</text>
				</view>
				<view class='order-status' v-if="item.pay_status == 0">
					<view class='order-apply' v-if="item.order_state == 8">(已申请售后)</view>
					<view class='order-apply' v-else-if="item.order_state == 7">（已取消）</view>
					<view v-else>未支付</view>
				</view>
				<view class='order-status' v-else-if="item.pay_status == 1">
					{{item.order_state_text}}
				</view>
			</view>
			
			<navigator open-type="navigate" hover-class="none" class="good" :url="'/pages/credit/credit_helporder?order_no='+item.order_no">
				<view class="lease-img">
					<image :src="item.goods_img"></image>
				</view>
				<view class="lease-info">
					<view class="lease-title">{{item.goods_name}}</view>
					<view class="lease-attr font-color-hs">{{item.item_names}}</view>
				</view>
				<view class="lease-price">
					<view class="lease-now">¥{{item.shop_price}}</view>
					<view class="lease-num font-color-hs">x{{item.buy_num}}</view>
				</view>
			</navigator>
			
			<view class="total-cont">共{{item.buy_num}}件商品，已支付：¥{{item. pay_amount }}</view>
			<view class="order-handle-box">
				<navigator hover-class="none" open-type="navigate"
					:url="'/pages/credit/credit_helporder?order_no='+item.order_no" 
					v-if="item.pay_status == 0 && item.order_state != 7"
				><view class='order-handle dopay'>立即代付</view>
				</navigator>
			</view>
		</view>
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderList:{},
				loadMoreStatus:1,
				page:1,
				total_pages:1
			};
		},
		methods: {
			getData(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.total_pages == 0) that.total_pages = 1
				if(that.page <= that.total_pages){
					jewel.get('order/pay_for_list',{page:that.page},true,function(res){
						if(type == 'loadMore'){
							that.orderList = that.redList.concat(res.data.data)
						}else{
							that.orderList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1?2:0
						}
						uni.stopPullDownRefresh()
					})
				}else{
					that.loadMoreStatus = 2
				}
			},
		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData()
		}
	};
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100vh !important;
		background: #efefef;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.credit-cont{
			padding: 20rpx 0;
			.order-list {
				width: 720rpx;
				background: #fff;
				margin: 0 auto;
				position: relative;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 15rpx;
				padding-top: 0;
				border-radius: 5px;
				.product_down{
					background-image: url('~@/static/images/jewel/product_down.png');
					background-size: 100%;
					background-repeat: no-repeat;
					width: 135rpx;
					height: 135rpx;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
				}
				.order-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 90rpx;
					border-bottom: 1px solid #dfdfdf;
					.order-create-time{
						color: #333333;
						font-size: 26rpx;
					}
					.order-status{
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
			
		
		
		.good {
			overflow: hidden;
			border-bottom: 1px solid #ddd;
			display: flex;
			align-items: flex-start;
			padding: 20rpx 0;
		}
		
		.lease-img {
			width: 144rpx;
			height: 144rpx;
			margin-right: 21rpx;
		}
		
		.lease-img image {
			width: 100%;
			height: 100%
		}
		
		.lease-info {
			width: 370rpx;
			font-size: 26rpx;
			overflow: hidden;
		}
		
		.lease-title {
			max-height: 68rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 28rpx;
			line-height: 34rpx;
		}
		
		.lease-attr {
			max-height: 68rpx;
			overflow: hidden;
			font-size: 26rpx;
			margin-top: 10rpx;
			line-height: 34rpx;
		}
		
		.lease-price {
			text-align: right;
			font-size: 26rpx;
			width: 160rpx;
		}
		
		.lease-market-price {
			text-decoration: line-through;
		}
		
		.lease-now {
			color: #343434;
			font-size: 28rpx;
		}
		
		.font-color-hs {
			color: #808080;
		}
		
		.order-handle-box {
			display: flex;
			justify-content: flex-end;
			font-size: 26rpx;
		}
		
		.order-handle {
			height: 45rpx;
			padding: 0 20rpx;
			border: 1px solid #666666;
			text-align: center;
			line-height: 45rpx;
			border-radius: 20px;
			color: #333333;
			margin-left: 20rpx;
		}
		.total-cont{
			font-size: 26rpx;
			color: #333333;
			text-align: right;
			padding: 24rpx 0;
		}
		.dopay {
			color: #fff;
			background: linear-gradient(to bottom right, #b676af, #ea669f, #f7c07e);
			border: none;
			line-height: 49rpx;
			height: 49rpx;
		}
		
		.order-apply {
			display: inline-block;
			color: green
		}
		.ml-10{
			margin-left: 10rpx;
		}
		
	}
	
</style>
